<template>
  <view class="bg-white margin-xs radius-lg">
    <block>
      <view class="flex padding-tb-sm">
        <view class="flex-treble">
          <view class="flex">
            <view class="padding-lr-sm padding-top-xs">
              <MrAvatar :src="scheduleItem.avatar"></MrAvatar>
            </view>
            <view class="padding-xs text-xl text-black text-left">
              <view class="text-bold text-cut" style="width: 60vw">{{ scheduleItem.nurseName }}</view>
              <view class="text-green text-sm padding-tb-xs">
                剩余可预约：{{ scheduleItem.usableNum }}
              </view>
              <view class="text-gray text-sm text-cut" style="width: 60vw">
                时间：{{ getStartTimeString(scheduleItem.start) }}-{{ getEndTimeString(scheduleItem.end) }}
              </view>
              <view class="text-gray text-sm text-cut" style="width: 60vw">
                医院：{{scheduleItem.hospital}}
              </view>
              <view class="text-gray text-sm text-cut" style="width: 60vw">
                挂号费：<text class="text-price text-xl text-red margin-right-xs"> {{ scheduleItem.price }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script setup lang="ts">
import {defineProps} from "vue";


import {getEndTimeString, getStartTimeString} from '@/utils'
import MrAvatar from "@/components/common/MrAvatar.vue";

const props = defineProps({
  scheduleItem: {
    type: Object,
    default: {}
  }
})
</script>

<style scoped>

</style>